<template>
  <div class="head-title" v-if="isShow">
    <img class="close" @click="isShow = false" src="@@/common/images/icon-close.png" alt="">
    <img class="logo" src="https://hxsapp-fe.oss-cn-hangzhou.aliyuncs.com/2024/logo_86.png">
    <div class="con">
      <p v-if="title != ''">{{title}}</p>
      <p v-if="subTitle != ''">{{subTitle}}</p>
    </div>
    <!-- <a class="btn linked-me" :href="linkedMeUrl">立即打开</a> -->
    <span class="btn linked-me" @click.stop="goRouterFn()">立即打开</span>
  </div>
</template>

<script>
import { linkedMe, isWeChatApp } from '@@/common/plugins/common.js';
export default {
  props: {
    link: {
      type: String,
      default: () => ''
    },
    title: {
      type: String,
      default: () => '好享瘦APP'
    },
    subTitle: {
      type: String,
      default: () => '科学管理体重，只为更好的你'
    },
  },
  data () {
    return {
      isShow: true,
      linkedMeUrl: '',
    }
  },
  created () {
    console.log(111111)
  },
  async mounted () {
    this.handlerDownload()
    let isWeChat = await isWeChatApp()
    this.isShow = !isWeChat
  },
  methods: {
    goRouterFn () {
      window.location.href = this.linkedMeUrl
    },
    handlerDownload () {
      let _this = this
      const info = {
        domId: 'linkedBtn',
        domText: '立即打开',
        nohtml: true,
        params: {
          "key": this.link
        }
      };
      linkedMe(info).then(res => {
        _this.$emit('linkedMeUrl',res)
        _this.linkedMeUrl = res;
      });
    }
  }
}
</script>
<style lang="scss" scoped>
.head-title {
  height: 110px;
  position: relative;
  z-index: 1009;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-color: rgba(29, 29, 29, 0.7);
  .close {
    width: 40px;
    margin-left: 18px;
  }
  .logo {
    height: 86px;
    margin: 0 15px;
  }
  .con {
    flex: 1;
    color: #fff;
    font-size: 24px;
    line-height: 33px;
  }
  .btn {
    height: 100%;
    color: white;
    background: #26d4ad;
    line-height: 110px;
    font-size: 30px;
    padding: 0 55px;
    &:active {
      opacity: 0.9;
    }
  }
}
</style>